<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

    <van-swipe-item class="item" v-for="(item, index) in banners" :key="index">
      <a :href="item.url" TARGET="_blank"><img v-lazy="item.img_url" alt=""></a>
      <!-- <img src="@/assets/h1.png" alt="">-->
    </van-swipe-item>
  </van-swipe>

</template>

<script>
export default {
  name: "HomeSwiper",
  props: {
    banners:Array,
    default() {
      return []
    }
  }
}
</script>

<style scoped>
@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(131, 184, 17, 0);
  }
}

.my-swipe{

  width:100%;
  height:240px !important;
  max-width:500px;
  margin:auto;
  border-radius: 10px;
  margin-top: 15px;

}
.my-swipe::after{
  content: '';

  animation: animated-border 3s infinite;
  width:100%;
  height: 200px;
  border-radius: 10px;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
  border: 1px solid #ffffff;
  top: 0;
  box-sizing: border-box;
  position: absolute;
}
img {
  width:100%;
  height:200px !important;
  max-height: 200px;
  position: absolute;
}

.van-swipe__indicator--active {
  background:red !important;
}
</style>
